Last updated: August 06, 2015

 

Index

  1. Introduction

  2. Quick workflow

  3. User interface and text attributes

         Text shadow
         What if no attributed string appears?
         Background pattern
         Text color and text stroke

  4. Fonts

         Favorite fonts
         Removing favorite fonts

  5. Generating Objective-C code

  6. Using code for OS X

         Sample download

  7. Using code for iOS

         Sample download

  8. Line breaks

  9. Exporting attributed string as image

  10. Saving progress

  11. Preferences

         a) General settings
         c) Folders
         c) Code
         d) Export

  12. Version 1.1

  13. FAQ


 

1. Introduction: attributedCode is an OS X desktop application that lets you design an attributed string and generate Objective-C code for it at the same time.  It supports such styled text attributes as text color, text background color, text alignment, underlining, striking-through, text shadow, kerning, paragraph (line space), text stroke.

 

Mac software attributedCode

Screenshot 1-01

 

When you finish designing an attributed string to your satisfaction, just click on the disclosure button at the bottom-right corner to get lines of Objective-C code.  The application supports two platforms - OS X and iOS.  And you will have different lines of code, depending your choice.  Copy the code into the system clipboard.  Then plug it right into your Xcode project.

 

Mac software attributedCode

Screenshot 1-02

 

attributedCode doesn't just generate Objective-C code.  It also lets you save the current attributed string as an image.

 

Mac software attributedCode

Screenshot 1-03

 

2. Quick workflow: attributedCode's workflow goes as follows.

 

  1. Start an Xcode project.  If your development platform is OS X, connect a text field (NSTextField) to the header file of a class.  If your development platform is iOS, connect a label (UILabel) to the header or the implementation file of a view controller class.
  2. Switching to attributedCode, click on the Preferences toolbar button and navigate to the Code tab.  Turn on the 3rd edit button from the top and enter the text field (for OS X) name or the label (for iOS) name from your Xcode project.  Click on Save at the bottom to close Preferences.
  3. Returing to the main application window, enter a string in the text field.  Locate a font drop-down menu and select a font.
  4. Click on the disclosure button at the bottom-right corner to get Objective-C code.
  5. Paste the code into your Xcode project.
  6. Returning to attributedCode again, choose Copy Font Function For OS X Into Clipboard under Function if your development platform is such.  Choose Copy Font Function For iOS into Clipboard if you are working on an iOS project.  Then plug the function in the system clipboard into your Xcode project.

 

3. User interface and text attributes: In reference to Screenshot 1-01, there are eight large letter labels.  T stands for text.  And you use the text field right next to it in order to set a text string.  Next, locate label U, which stands for underlining.  The color button to the right is used to set an underline color.  It also comes with a segment control with three tabs.  Click on the leftmost tab if you don't want to underline text.  Moving to the right, we have label S with a horizontal red line.  It stands for striking-through.  This attribute also comes with a color button and a segment control with three buttons.  So you have options of no line or striking the text string through with one or two lines.  Moving to the right of the text field, we have label F, which stands for fonts.  So explore the drop-down menu to the right in order to select a font.  Next, we have label S below F.  This label stands for shadow.  Moving to the right, we have label K, which stands for kerning (space between letters).  P stands for paragraph (space between lines).  This text attribute has no effect on the text string unless it has one or more line breaks.  Finally, we have another S, which stands for stroke as in text stroke (border around the text string). 

 

Mac software attributedCode

Screenshot 1-01

 

By the way, there are three tiny buttons to the right of the text field.  Click on the U button to convert the entire text string into uppercase.  The second button (L) from the top is used to change the case to lowercase.  Finally, click on the last button (1) from the top to remove line breaks so that the string will be put in one line.

 

Mac software attributedCode

Screenshot 1-02

 

Notice that each of four labels (S, K, P, S) below F comes with a disclosure button.  Clicking on any of them, you will see one or more controls.  For example, click on the disclosure button for S as in shadow.  And you have a color button, a slider and three value fields.  (See Screenshot 1-02.)  Casting shadow around the text string involves a color.  So click on the color button at the top-left corner to pick a color.  Use the slider to specify the blurred color extent.  As you move the slider to the right or left, the value field below will indicate the current value.  There are two more value fields at the bottom.  You can use them to change the position where shadow is cast.  The value field to the left indicates the horizontal coordinate (x) while the other field indicates the vertical coordinate (y).  If you set 0 to each of them, shadow is cast around the text string.  That's outer glow.  If you set 3 to the x field and 4 to the y field, then it will be drop shadow because the center of the text shadow moves to the upper-right direction.

A large area with a checkerboard background is where attributedCode displays the current attributed string.  If nothing appears, make sure (1) that you have a text string, (2) that you have set a text size, and (3) that you have selected a font.  (See Screenshot 1-02a.)

 

Mac software attributedCode

Screenshot 1-02a

Mac software attributedCode

Screenshot 1-02b

 

The default background pattern is a checkerboard.  This background pattern is not always suitable.  You have several more options.  Choose a different pattern under Background.  (See Screenshot 1-02b.)

It is worth mentioning that the text color and the text stroke attributes are exclusive to each other, which means that you can't have both.  In reference to Screenshot 1-03, if you set a stroke value greater than 0, the text color will be canceled.  And you will have a transparent string with a border color.  If you really need to have a solid text color, then you have to set the stroke width to zero.  With Version 1.1, which is forthcoming in mid-August (2015), the user will be able to apply both the fill text color and the stroke color to text at the same time.  Click here for more information.

 

Mac software attributedCode

Screenshot 1-03

Mac software attributedCode

Screenshot 1-04

 

4. Fonts: Selecting a font has a few implications.  No. 1, just because you have turned on the bold and/or italic checkbox buttons, that doesn't mean they are effective.  For example, Screenshot 1-04 indicates that bold and italic are both on.  But this particular font, Cooper Black, supports neither of them.  By the way, technically, these font attributes are called typefaces.  How do we know that Cooper Black supports neither of them?  One easy of finding that out is using TextEdit.  Open the font panel by pressing Command + T.  Then choose Cooper Black under the font family.  And you will find out that the only typeface available for this font is regular or the default style.  (See Screenshot 1-05.)  In the event that the selected font doesn't support a typeface that you request, attributedCode will automatically return the default style, using a function.  We will discuss this issue in a minute.

 

Mac software attributedCode

Screenshot 1-05

 

 

Another thing about selecting a font is that a target device doesn't necessarily support the font you have selected.  For example, iPhone Simulator doesn't support Arial Black.  Your iPhone or iPad may not have access to a custom font that you have on your current computer.  Furthermore, just because the font that you have selected with attributedCode supports the bold and italic typefaces, there is no gurantee that iPhone Simulator or your iOS devices support them.

In the meantime, if you have a few hundred fonts to choose from, you may have a hard time remembering which font works for iPhone Simulator and which doesn't.  Or you may have a hard time picking ones that you most frequently use.  What you can do in a situation like that is to create a favorite font list.

In order to add a particular font to your favorite font list, first, using the font drop-down menu, select a font to add to the list.  Then just click on the add (+) button next to it.  (See Screenshot 1-06.)  You can also choose Add As Favorite Font under Font for the same purpose.  Now, explore the drop-down menu at the bottom.  When you select a favorite font on the drop-down menu at the bottom, attributedCode will select the same on the font drop-down menu at the top.

 

Mac software attributedCode

Screenshot 1-06

Mac software attributedCode

Screenshot 1-07

 

If you need to remove a particular favorite font from the list, first, select the one to remove from the favorite font drop-down menu.  Then click on the delete (-) button.  You can also choose Remove Favorite Font under Font.  Then you will be prompted for confirmation.  (See Screenshot 1-07.)  So click on Remove to proceed.  And attributedCode will refresh the drop-down menu at the bottom after removing the current selection.

 

5. Generating Objective-C code: The main objective of this application is to let the user generate Objective-C code that reflects an attributed string that they design.  For this purpose, first, select your development platform with a segment control at the bottom-right corner.  (See Screenshot 1-08.)  Then click on the disclosure button next to it.  And the popover window containg a textview control provides you with lines of Objective-C code that reflects the current attributed string you have.  (Screenshot 1-09.)

 

Mac software attributedCode

Screenshot 1-08

Mac software attributedCode

Screenshot 1-09

 

One thing that you can do here is to write Objective-C code to a file.  For this purpose, click on the Save As Text toolbar button or choose Save Code As Text under File.  Then you will be prompted to name a text file.  (See Screenshot 1-10.)  Another thing that you can do is to send all lines of code to a printer.  For this purpose, click on the Print Code toolbar button or choose Print under File.

 

Mac software attributedCode

Screenshot 1-10

Mac software attributedCode

Screenshot 1-11

 

6. Using code for OS X: Let's start a simple Xcode project with one text field (NSTextField).  Connect your text field to AppDelegate.h.  Then name it.  (See Screenshot 1-11.)  Next, switch to the implementation file.  And paste your code inside the (void)applicationDidFinishLaunching:(NSNotification *)aNotification method.  (See Screenshot 1-12.)  Now, Xcode should tell you that you have one or two errors.  (See Screenshot 1-13.)  If you have an error on the very last line, that's because attributedCode has generated Objective-C code without knowing your text field name.  So change the text field name according to the name you have given to your text field.

 

Mac software attributedCode

Screenshot 1-12

Mac software attributedCode

Screenshot 1-13

 

The other error tells you that Xcode doesn't know what the (NSFont *)makeBoldItalicFont:(NSFont *)font :(BOOL)b :(BOOL)i function is.  Your Xcode project requires a function that returns a valid NSFont object regardless of your typeface options.  You want to avoid a situation where your application returns an NSFont object with the bold or italic typeface when in fact the font that you have selected doesn't support that typeface.  That will hang up your application.  If you have trouble creating a function like that, attributedCode can provide you with one.  Choose Copy Font Function For OS X Into Clipboard under Function.  (See Screenshot 1-14.)  Now, you have a dozen lines of code pasted into your system clipboard.  Returning to your Xcode project, just dump the function somewhere outside the application methods.  (See Screenshot 1-15.)  You should now be error-free.  So press Command + R to run a debugger to make sure you can reproduce the same attributed string that you see with attributedCode.

 

Mac software attributedCode

Screenshot 1-14

Mac software attributedCode

Screenshot 1-15

 

In the case above, one is forced to revise the code with respect to the text field name.  There is something that he or she can do about it.  Opening Preferences and navigating to the Code tab, they could set a text field name.  (See Screenshot 1-16.)  So turn on the Edit button and enter the same name that you use in your Xcode project.

 

Mac software attributedCode

Screenshot 1-16

Mac software attributedCode

Screenshot 1-17

 

For more information, you may want to try exploring a sample Xcode project.  Click here to download a zip file containing a sample Xcode project for OS X.

 

7. Using code for iOS: The procedure is pretty much the same for iOS development.  So connect an instance of UILabel to the header or implementation file of ViewController.  (See Screenshot 1-17.)  And give it a name.

 

Mac software attributedCode

Screenshot 1-18

Mac software attributedCode

Screenshot 1-19

 

Returning to attributedCode, set the development platform to iOS and generate code.  Then paste it inside the viewDidLoad method.  And you should get one or two errors.  (See Screenshot 1-18.)  So make sure that you set the NSMutableAttributedString object to the right UILabel object.  Next, choose Copy Font Function For iOS Into Clipboard under Function to copy an UIFont function into the clipboard.  (See Screenshot 1-19.)  Finally, return to your Xcode project and paste the font function somewhere.  Again, this function will return the default typeface if a font that you select with attributedCode does not support bold or italic.  Now, you should be good to go.

 

Mac software attributedCode

Screenshot 1-20

Mac software attributedCode

Screenshot 1-21

 

For more information, you may want to try exploring a sample Xcode project.  Click here to download a zip file containing a sample Xcode project for iOS.

 

8. Line breaks: For now, as far as using the Objective-C code from this application is concerned, we have discussed a simple case where the text string contains no line breaks.  If there is one or more, it can be problematic.  Screenshot 1-21 shows a case where the input string contains two line breaks.  If you are using this application, you are probably familar with Objective-C programming.  Imagine a situation where you have to append a variable containing one or more line breaks to an NSMutableString object like the following.

 

[str appendFormat:@"NSMutableAttributedString *%@ = [[NSMutableAttributedString alloc] initWithString:@%@%@%@];",variableStr,chr34,stringField.stringValue,chr34];

 

 

where str is an NSMutableString object, variableStr is a string variable, stringField is an instance of NSField, chr34 is a static string pointing to the double quotation mark.  Provided that stringField.stringValue contains one or more line breaks (\u2028), they cannot be literally replaced with \r\n because the latter also indicates the line break.

So what this application does is to replace the line break (\u2028) with a dummy line break notation.  By default, it's set to \R where the first character is NOT a standard ASCII character but a Japanese back slash.  When you click on the disclosure button at the bottom-right corner, you will see a warning message indicating that the input string contains one or more line breaks.  (See Screenshot 1-22.)  Now, if you take a close look at the Objective-C code that attributedCode has generated, you will realize that each line break is replaced by \R literally instead of \r\n.  (See Screenshot 1-23.)  When you paste the Objective-C code containg the dummy replacment mark into an Xcode project, you must manually replace it with \r\n.

 

Mac software attributedCode

Screenshot 1-22

Mac software attributedCode

Screenshot 1-23

 

Now, going back to the Code tab in Preferences, if necessary, you can define a different pair of letters as the line break replacement.  Click on the second Edit button from the top.  (See Screenshot 1-24.)  Then enter only two characters.  You cannot use the standard ASCII back slash (\) or double quotation mark (").

 

Mac software attributedCode

Screenshot 1-24

Mac software attributedCode

Screenshot 1-25

 

9. Exporting attributed string as image: The main objective of this application is, again, to let the user generate Objective-C code reflecting an attributed string that they design.  It also lets you save the current attributed string as an image.  For this purpose, click on the Export As Image toolbar button or choose Export As Image under File.  First, you will be prompted to select an export format.  (See Screenshot 1-25.)  So explore the drop-down menu and choose one of several options including BMP, GIF, JPEG, JPEG 2000, PNG, TIFF.  Clicking on Next, you will be then prompted to name a file.  If you have selected JPEG or JPEG 2000 as an export format, you will get to set a compression rate at this stage.  (See Screenshot 1-26.)  Screenshot 1-27 shows the result of saving an attributed string as a JPEG image.

 

Mac software attributedCode

Screenshot 1-26

Mac software attributedCode

Screenshot 1-27

 

10. Saving progress: There are many styled text attributes.  attributedCode offers two measures by which the user can reproduce text attributes after they quit the application.  No. 1, you can let the application save your styled text settings internally.  For this purpose, choose Save Settings under attributedCode.  Then you will see a status message at the bottom-left corner of the application window, indicating that settings have been saved.  (See Screenshot 1-28.)  You can then choose Load Settings under attributedCode manually to let the application load the saved settings at any time.  If you want to let the application automatically load the saved settings whenever it starts up, you can do so under the General settings tab of Preferences.

 

Mac software attributedCode

Screenshot 1-28

Mac software attributedCode

Screenshot 1-29

 

The other approach to reproducing progress is to save current progress as a document file.  For this purpose, click on the Save As Doc toolbar button or choose Save As Document under File.  Then you will be prompted to name a file.  The file type that this application uses is atc.  (See Screenshot 1-29.)  You can now select a document file of this type by clicking on the Open Doc toolbar button or choose Open Document under File.  (See Screenshot 1-30.)  Of course, you can just double-click on a document file for this application to reproduce progress as well.

 

Mac software attributedCode

Screenshot 1-30

 

 

 

 

 

 

 

 

 

 

 

 

 

<< Previous page   Next page >>